"use client"

import { Button } from "@/components/ui/button";
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { zodResolver } from "@hookform/resolvers/zod";
import { useRequest } from "ahooks";
import React from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";

interface IProps {
  name?: string
}

const formSchema = z.object({
  // username: z.string().min(2, {
  //   message: "Username must be at least 2 characters.",
  // }),
  modelname: z.string(),
  forecast: z.string(),
  windows: z.string(),
  // windowslength: z.string(),
  file: z.instanceof(FileList).refine((file) => file?.length == 1, 'File is required.'),

})

const ModelTrainingPage: React.FC<IProps> = (props) => {

  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
  });

  const fileRef = form.register("file");

  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    const form = new FormData();
    form.append('filename', values.file[0]);
    form.append('modelname', values.modelname);
    form.append('windows', values.windows);
    form.append('forecast', values.forecast);

    console.log('查看收到的值', form)
    // runPremodelResult(form);
    
  }



  const ModelDetail = {
    LSTM: 'lstm',
    BiLSTM: 'bilstm',
    GRU: 'gru',
    STACKModel: 'stacked',
    CNNLSTM: 'cnnlstm',
    CNN: 'cnn'
  }

  const windowLength = {
    Seven: '7天',
    Forteen: '14天',
    Twentyone: '21天',
  }

  const forecastLength = {
    Short: '短期',
    Long: '长期',
  }

  return (
    <div>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
          <FormField
            control={form.control}
            name="modelname"
            render={({ field }) => (
              <FormItem>
                <FormLabel>请选择网络类型</FormLabel>
                <Select
                  // disabled={isLoading}
                  onValueChange={field.onChange}
                // defaultValue={field.value}
                >
                  <FormControl>
                    <SelectTrigger
                      className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 focus:ring-offset-0 capitalize outline-none"
                    >
                      <SelectValue placeholder="请选择模型" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {Object.values(ModelDetail).map((type) => (
                      <SelectItem
                        key={type}
                        value={type}
                        className="capitalize"
                      >
                        {type}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="windows"
            render={({ field }) => (
              <FormItem>
                <FormLabel>请选择观测窗口长度</FormLabel>
                <Select
                  // disabled={isLoading}
                  onValueChange={field.onChange}
                // defaultValue={field.value}
                >
                  <FormControl>
                    <SelectTrigger
                      className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 focus:ring-offset-0 capitalize outline-none"
                    >
                      <SelectValue placeholder="请选择观测窗口长度" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {Object.values(windowLength).map((type) => (
                      <SelectItem
                        key={type}
                        value={type}
                        className="capitalize"
                      >
                        {type}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="forecast"
            render={({ field }) => (
              <FormItem>
                <FormLabel>请选择预测长度</FormLabel>
                <Select
                  // disabled={isLoading}
                  onValueChange={field.onChange}
                // defaultValue={field.value}
                >
                  <FormControl>
                    <SelectTrigger
                      className="bg-zinc-300/50 border-0 focus:ring-0 text-black ring-offset-0 focus:ring-offset-0 capitalize outline-none"
                    >
                      <SelectValue placeholder="请选择预测长度" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    {Object.values(forecastLength).map((type) => (
                      <SelectItem
                        key={type}
                        value={type}
                        className="capitalize"
                      >
                        {type}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="file"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  请上传csv文件：
                </FormLabel>
                <FormControl>
                  <Input type="file" placeholder="shadcn" {...fileRef} />
                </FormControl>
                <FormDescription>
                  请上传测试集
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />
          <Button type="submit" >预测</Button>
        </form>
      </Form>
    </div>
  )
}

export default ModelTrainingPage;